<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="120px">
      <h2 style="text-align: center">管理评审记录</h2>
      <h4 class="form-header h4">基础信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="管理评审计划" prop="innerManagerAuditId">
            <el-select v-model="formData.innerManagerAuditId" placeholder="请选择管理评审计划" clearable @change="changePlan"
              :style="{ width: '100%' }">
              <el-option v-for="(item, index) in planList" :key="index" :label="item.auditYear + '年度管理评审工作计划'"
                :value="item.innerManagerAuditId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主持人">
            {{ formData.host }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录人" prop="logUserId">
            <UserDialog :disabled="$route.query.isInfo || isInfo" v-model="formData.logUserId" @change="changeUser">
            </UserDialog>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="管评时间" prop="auditDate">
            <el-date-picker v-model="formData.auditDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择管评时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <h4 class="form-header h4">
        管理评审核查表
        <el-button type="primary" plain size="mini" @click="handleAdd">增行</el-button>
        <!-- <el-button type="danger" plain size="mini" @click="handleDele"
          >删行</el-button
        > -->
      </h4>
      <el-table :data="formData.infoList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />

        <el-table-column min-width="200" label="评审项目" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`infoList.${scope.$index}.item`" :rules="rules.item">
              <el-select v-model="scope.row.item" filterable placeholder="请选择评审项目"
                @change="dictType($event, scope.$index)" @visible-change="changePic($event, scope.$index)">
                <el-option v-for="dict in dict.type.sys_manager_item" :key="dict.value" :label="dict.label"
                  :value="dict.value" :disabled="dict.disabled" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="单项结论" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`infoList.${scope.$index}.result`" :rules="rules.result">
              <el-input v-model="scope.row.result" placeholder="请输入单项结论"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="运行情况" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`infoList.${scope.$index}.run`" :rules="rules.run">
              <el-input v-model="scope.row.run" placeholder="请输入运行情况"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="文件适应性" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`infoList.${scope.$index}.adapt`" :rules="rules.adapt">
              <el-input v-model="scope.row.adapt" placeholder="请输入文件适应性"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="删除" align="center">
          <template slot-scope="scope">
            <el-button type="danger" plain size="mini" @click="handleDele(scope.$index)">删行</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import store from "@/store";

import {
  selectList as selectListplan,
  managerAuditInfo,
} from "@/api/quality/manageAudit/plan.js";
import {
  managerLogAdd,
  updategmanagerLog,
  managerLogInfo,
} from "@/api/quality/manageAudit/managerLog.js";
export default {
  components: {},

  dicts: ["sys_manager_item"],

  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      planInfo: {},
      formData: {
        host: "",
        innerManagerAuditId: "",
        auditDate: undefined,
        logUserId: undefined,
        infoList: [
          {
            item: "",
            result: "",
            adapt: "",
            run: "",
          },
        ],
      },
      rules: {
        logUserId: [
          {
            required: true,
            message: "请选择记录人",
            trigger: "change",
          },
        ],
        auditDate: [
          {
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        innerManagerAuditId: [
          {
            required: true,
            message: "请选择管理评审计划",
            trigger: "change",
          },
        ],
        item: [
          {
            required: true,
            message: "请选择评审项目",
            trigger: "change",
          },
        ],

        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],

        result: [
          {
            required: true,
            message: "请输入单项结论",
            trigger: "blur",
          },
        ],
        adapt: [
          {
            required: true,
            message: "请输入文件适应性",
            trigger: "blur",
          },
        ],
        run: [
          {
            required: true,
            message: "请输入运行情况",
            trigger: "blur",
          },
        ],
      },
      deptOptions: [],
      planList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
    if (this.$route.query.planId) {
      this.formData.innerManagerAuditId = Number(this.$route.query.planId);
      this.changePlan(this.formData.innerManagerAuditId);
    }
    this.getPlan();
  },
  mounted() { },
  methods: {
    dictType(e, i) {
      // console.log(e);
      // console.log(this.dict.type.sys_manager_item);
      let arr = this.dict.type.sys_manager_item
      arr.forEach((item, index) => {
        //当前选的与数组中的相同 不让其显示，且num不存在时
        if (item.value == e ) {
          console.log('.././././.');
          // this.$set(this.dict.type.sys_manager_item,index,)
          item.disabled = true
          item.num = i
          this.$forceUpdate()
          // this.dict.type.sys_manager_item.splice(index,1)
        }else  if (item.num == i) {
          console.log(item.num, '展开了已选的下拉框');
          item.disabled = false
          item.num = null
          this.$forceUpdate()
        }

      });
      console.log(this.dict.type.sys_manager_item);
    },
    changePic(e, i) {
      console.log(this.dict.type.sys_manager_item);
    },
    changeUser(e) {
      this.formData.logUser = e.nickName;
    },
    changePlan(e) {
      if (!e) {
        this.formData.host = "";
        this.formData.hostId = "";
      } else {
        managerAuditInfo(e).then((response) => {
          this.formData.host = response.data.hostName;
          this.formData.hostId = response.data.hostId;
        });
      }
    },

    handleAdd() {
      this.formData.infoList.push({
        item: "",
        result: "",
        adapt: "",
        run: "",
      });
    },
    handleDele(e) {
      if (this.formData.infoList.length == 1) return;
      this.formData.infoList.splice(e, 1);
    },

    getPlan() {
      selectListplan().then((response) => {
        this.planList = response.data;
      });
    },

    getinfo() {
      managerLogInfo(this.$route.query.id || this.id).then((response) => {
        this.formData = response.data;
        this.changePlan(this.formData.innerManagerAuditId);

        // selectList({
        //   innerCheckId: this.$route.query.id || this.id,
        //   createBy: store.state.user.name,
        // }).then((response) => {
        //   this.formData.infoList = response.data;
        // });
      });
      // 获取当前下的 审查明细
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.innerManagerLogId != undefined) {
            updategmanagerLog(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            managerLogAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
